import React, { memo, Component } from 'react'
import { Image, Table, Button, Input, Select, message } from 'antd'
import './index.css'
import { baseUrl } from '../../assets/baseUrl'
import { getTempList,deleteFile } from '@/api/index'
import {formatDate} from '../../utils/tool'
const BaseUrl = baseUrl()
const { Option } = Select

class PictureMonitor extends Component {
  constructor(props) {
    super(props)
    this.state = {
      pageSize: 10,
      pageNum: 1,
      total:10,
      orderMethod: '',
      data:[],
    }
  }
  componentDidMount() {
    this.getList()
  }
  getList = () => {
    const { pageSize, pageNum, orderMethod } = this.state
    getTempList({ pageSize, pageNum, order:orderMethod }).then((res) => {
      const { data } = res
      if (data.message) {
        message.error(data.message)
        return
      }
      this.setState({
        data:data.data,
        total:data.total
      })
    })
  }

  changeTable = (pagination, filters, sorter, extra) => {
    console.log(sorter.order);
    let order = ''
    if(sorter.order === 'descend') {
      order = 'order by fileSize desc'
    }
    if(sorter.order === 'ascend') {
      order = 'order by fileSize asc'
    }
    this.setState(
      {
        hoverWhich:null,
        orderMethod: order
      },
      () => this.getList()
    )
  }

  deleteFile=(row)=>{
    // console.log(row.pathWay.split('/').at(-1));
    deleteFile({pathWay:row.pathWay}).then(res=>{
      console.log(res);
      if(res?.data?.result?.code === 200) {
        message.success(res?.data?.result?.message)
        this.getList()
      }
      else if(res?.data?.result?.code === 300) {
        message.warn(res?.data?.result?.message)
      }
      else if(res?.data?.result?.code === 400) {
        message.error(res?.data?.result?.message)
      }
    })
  }
  render() {
    const {data} = this.state

    const columns = [
      {
        title: 'UID',
        dataIndex: 'studentId',
        align: 'center',
        render:(item)=>{
          if(item ===3000)
            return '党建系统'
            else if(item ===4000)
            return <span style={{color:'red'}}>未知来源</span>
            else return item
        }
      },
      {
        title: '文件路径',
        dataIndex: 'fileName',
        align: 'center',
        ellipsis:true,
        width:200,
        render:(item,row)=>{
          return <div className='pathBox' onClick={()=>window.open('https://www.donglongdong.xyz/'+row.pathWay.slice(7,row.pathWay.length+1))}>{item}</div>
        }
      },
      {
        title: '大小',
        dataIndex: 'fileSize',
        align: 'center',
        sorter: (a, b) => a.fileSize - b.fileSize,
        render: (row, item, index) => {
          let B = Number(row)
          let KB = B/1024
          if(KB>1024){
            let MB = KB/1024 
            if(MB>1024){
              let GB = MB/1024
              return <span style={{color:'red'}}>{GB.toFixed(2)+"G"}</span>
            } else {
              return <span style={{color:'rgb(0 89 218)'}}>{MB.toFixed(2)+"M"}</span>
            }
          } else return <span style={{color:'rgb(63 182 0)'}}>{KB.toFixed(2)+'KB'}</span>
        }
      },
      {
        title: '文件类型',
        dataIndex: 'fileType',
        align: 'center'
      },
      {
        title: '上传时间',
        dataIndex: 'uploadTime',
        align: 'center',
        render:(a)=>{
          return formatDate(a)
        }
      },
      {
        title: '用途',
        dataIndex: 'useMethod',
        align: 'center',
      },
      {
        title: '操作',
        dataIndex: 'useMethod',
        align: 'center',
        render:(item,row)=>{
          return <div onClick={this.deleteFile.bind(this,row)} style={{color:'red',cursor:'pointer'}}>删除</div>
        }
      }
    ]

    //分页器
    const pagination = {
      current: this.state.pageNum,
      pageSize: this.state.pageSize,
      onChange: (e) => {
        this.setState(
          {
            pageNum: e
          },
          () => {
            this.getList()
          }
        )
      },
      total: this.state.total
    }
    return (
      <div className="setting-opration">
        <div style={{padding:'30px 8vw'}}>
        <Table
          columns={columns}
          dataSource={data}
          onChange={this.changeTable.bind(this)}
          locale={{
            cancelSort: '点击取消排序',
            triggerAsc: '点击升序',
            triggerDesc: '点击降序'
          }}
          pagination={pagination}
        />
        </div>
      </div>
    )
  }
}
export default memo(PictureMonitor)
